<template>
	<view class="container">
		<view class="header">
			<text class="title">欢迎使用心理咨询平台</text>
		</view>
		<view class="input-box">
			<view class="input-text">密码登录</view>
			<view class="input-row">
				<input type="text" placeholder="请输入账号" v-model="username" />
			</view>
			<view class="input-row">
				<input type="password" placeholder="请输入密码" v-model="password" />
			</view>
			<view class="input-row">
				<radio-group @change="handleRoleChange">
					<label>
						<radio value="user" :checked="role === 'user'" /> 用户
					</label>
					<label>
						<radio value="psy" :checked="role === 'psy'" /> 心理咨询师
					</label>
				</radio-group>
			</view>
			
			<text v-if="errorMessage" class="error">{{ errorMessage }}</text>
			
			<button 
				type="primary" 
				@click="handleLogin"
				class="login-button"
			>登录</button>
			
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '', // 用户名输入
			password: '', // 密码输入
			role: 'user', // 角色，默认是 user
			errorMessage: '' // 错误信息
		};
	},
	methods: {
		handleLogin() {
			// 检查输入是否完整
			if (!this.username || !this.password) {
				this.errorMessage = '请填写账号和密码';
				return;
			}

			// 固定账号密码验证
			if (this.username === 'admin' && this.password === 'admin') {
				// 登录成功，根据角色跳转到不同页面
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
				setTimeout(() => {
					if (this.role === 'user') {
						uni.redirectTo({ url: '/pages/user/index' }); // 跳转到用户首页
					} else if (this.role === 'psy') {
						uni.redirectTo({ url: '/pages/psy/index' }); // 跳转到心理咨询师首页
					}
				}, 1000);
			} else {
				// 登录失败
				this.errorMessage = '账号或密码错误';
			}
		},
		handleRoleChange(e) {
			this.role = e.detail.value; // 更新角色
		}
		
	}
};
</script>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #f5f5f5;
}

.header {
	margin-bottom: 30px;
}

.title {
	font-size: 24px;
	font-weight: bold;
	color: #333;
}

.input-box {
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	width: 90%;
	max-width: 400px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input-text {
	text-align: left;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 20px;
	color: #333;
}

.input-row {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.input-row input {
	flex: 1;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 16px;
}

.radio-group {
	display: flex;
	align-items: center;
}

.radio-group label {
	margin-right: 20px;
	font-size: 16px;
}

.login-button {
	width: 100%;
	padding: 10px 20px;
	background-color: #81B337;
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 16px;
	margin-top: 20px;
}

.forget-password {
	margin-top: 15px;
	text-align: center;
	color: #666;
	font-size: 14px;
}

.forget-password navigator {
	color: #666;
	text-decoration: none;
}

.error {
	color: red;
	margin-top: 10px;
	text-align: center;
}
</style>